<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>密码框效果</title>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js" ></script>
	</head>
	<body>
		<div id="msg">
			
		</div>
		用户名： <input type="text" value="" name="uname" id="uname" placeholder="6-10位的字母和数字组合"/>
		
	</body>
	<script>
		
		var reg = /^(?![0-9]+$)(?![A-Za-z]+$)[0-9A-Za-z]{6,10}$/
		
		$("#uname").blur(function(){
			var context = $('#uname').val();
			alert(context);
			var re = new RegExp(reg);
			var flag = re.test(context);
			if(flag==true){
				$("#msg").html("用户名格式正确");
				$("#msg").css('color','green');
			}else{
				$("#msg").html("6-10位的字母和数字组合");
				$("#msg").css('color','red');
			}
		})
	</script>
</html>
